
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网桥快速开户</title>
    <!-- <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../css/global.css" rel="stylesheet">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link href="../css/_x_ctr_location.css" rel="stylesheet" type="text/css" />
    <link href="../css/cmxform.css" rel="stylesheet" type="text/css" />

</head>

<body>
	<!--1.0 narbar -->
    <div   class="fixedNavbar">
       <#include "../navbar.html">
	</div>

    <div class="container-fluid">
    	<!--2.0 left sidebar -->
        <div class="row">
            <#include "../sidebar.html">

            <!--2.1 main content -->
            <div class="col-md-10">

                    <!--2.1.0 tab title -->
		            <ul id="myTab" class="nav nav-tabs" role="tablist">
		                <li class="active"><a href="#fee-manage" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-globe"></i>&nbsp;网桥快速开户</a>
		                </li>
		            </ul>

                    <!--2.1.1 form-->
                    <form id="registerForm" class="form-horizontal" role="form" action="submitQRegister" method="post" enctype="multipart/form-data">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="font-weight:bold;">网桥快速注册
                                <span style = "font-size:20px;color:red;font-weight:bold;"></span> 
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label for="companyName" class="col-sm-2 control-label">企业或机构名称</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control col-sm-3" name="companyName" id="companyName" placeholder="企业或机构名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="supervisor" class="col-sm-2 control-label">使用者</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" name="owner" id="supervisor" placeholder="使用者手机号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="address" class="col-sm-2 control-label">安装地址</label>
                                    <div class="col-sm-3">
                                        <!-- <input type="text" class="form-control" name="contactorMobile" id="contactorMobile" placeholder="安装地址"> -->
                                        <input type="text" class="form-control" placeholder="安装地址" name="address"  id="address">
                                    </div>
                                    <input type="hidden" id="address_code" name="address_code" value="" />
                                </div>
                                <div class="form-group">
                                    <label for="boxId" class="col-sm-2 control-label">网桥ID</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" name="boxId" id="boxId" placeholder="网桥ID">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="ip" class="col-sm-2 control-label">ip地址</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" name="ip" id="ip" placeholder="ip地址">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="networkflowLimitation" class="col-sm-2 control-label">流量阀值(GB)</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" name="networkflowLimitation" id="networkflowLimitation" placeholder="流量阀值">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="verifyCode" class="col-sm-2 control-label">验证码</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" name="verifyCode" id="verify-code" placeholder="请输入验证码">
                                        <img src = "verify" style = "float:left;display:inline-block;cursor:pointer;" id = "verify-code-img"/>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-3">
                                        <button type="submit" id="btn-register" class="btn btn-primary">立即开户</button>
                                        <label id="register-hint" class="error" for="submit"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

            </div>
        </div>
    </div>
    <script src="../js/bootstrap/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap/bootstrap.min.js"></script>
    <script src="../js/_x_ctr_location-1.0.min.js"></script>
    <script src="../js/jquery.iframe-transport.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script src="../js/WdatePicker.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/common.js"></script>
	<script src="../js/util.js"></script>
	<script src="../js/sha1.js"></script>

    <script>
    	$(function(){
    		$("#verify-code-img").bind("click", function(e) {
				this.src = "verify?d=" + new Date(); 
			});
    		
    		$("#address").Location({
                ValueControlID: "address_code",
                LastSelected: false
            });
    		
    		//处理注册表单
    		$.validator.addMethod("valueNotEquals", function(value, element, arg){
				return arg != value;
			});
			
			$.validator.addMethod("isPhoneNum", function(value, element, arg){
			    var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
		        if(pattern.test(value)) { 
		            return true; 
		        }
		        return false;
			});
			
		    $.validator.addMethod("ip", function(value, element) {
		    	return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256)); 
		    });
		    
			$("#registerForm").validate({
				rules: {
					companyName: {
						required : true,
						remote: {
					        url: "checkCompanyNameAvailableForBoxRegistration",
					        type: "post",
					        data: {
					        	companyName: function() {
					            	return $("#companyName").val();
					          	}
					        }
					    },
					    minlength: 2,
					    maxlength: 100
					},
					supervisor: {
						required: true,
						isPhoneNum: ""
					},
					address_code: {
						required: true,
					},
					boxId: {
						required: true,
					    minlength: 2,
						maxlength: 20
					},
					ip: {
						required: true,
					    ip:""
					},
					networkflowLimitation: {
						required: true,
					},
					verifyCode: {
						required: true,
						remote: {
					        url: "checkVerifyCode"
					    } 
					} 
				},
				messages: {
					companyName: {
						required : "名称不能为空",
						remote : "该企业或机构不可用",
						minlength : "名称太短",
						maxlength : "名称太长,请检查"
					},
					supervisor: {
						required: "请输入使用者手机号",
						isPhoneNum: "请输入合法手机号",
					},
					adress_code: {
						required: "地址不能为空",
					},
					boxId: {
						required: "网桥ID不能为空",
					},
					ip: {
						required: "输入网桥ip",
						ip:"请输入合法ip地址",
					},
					networkflowLimitation: {
						required: "流量阈值不能为空",
					},
					verifyCode: {
				       required: "验证码不能为空",
				       remote: "验证码错误"
				    }
				},
				submitHandler : function(form) {
					debugger;
					$("#register-hint").text("正在运行,请稍后...").show();
					var companyName = $("#companyName").val();
					var supervisor = $("#supervisor").val();
					var address = $("#address").val();
					var boxId = $("#boxId").val();
					var ip = $("#ip").val();
					var networkflowLimitation = $("#networkflowLimitation").val();
					
					var url = "/eoip/web/doBoxQuickRegister";
					var params = {  companyName:companyName,
									supervisor:supervisor,
									address:address,
									boxId:boxId,
									ip:ip,
									networkflowLimitation:networkflowLimitation
									};
					
				 	common.post(url, params, function (data) {
                        $("#register-hint").text('').show();
                        var data = jQuery.parseJSON(data);
                        if (data.code == "1") {
                            $("#register-hint").text('网桥注册成功...').show();
                            alert('网桥开户成功!');
                            location.href = '/eoip/web/box_quick_registration';
                        } else {
                            $("#register-hint").text(data.message).show();
                            $('#btn-register').removeAttr('disabled');
                        }//end if
                    });//end common post
				}
			});
    	});
    </script>
</body>
</html>
